<template>
	<view class="box">
    <!-- 管理员个人基本资料 -->
    <view class="user-show-info" v-if="!show">
       <!-- 管理员信息展示提示 -->
       <view class="user-info-body1">
         <view class="user-info-header"><view class="text">管理员信息</view></view>
       </view>
      
      <!-- <u-divider :hairline="false"></u-divider> -->
      <!-- <view class="line1"></view> -->
      <!-- 详细信息展示 -->
      <view class="user-info-body">
        <view class="user-info-body-title">账号</view>
        <view class="user-info-body-value">admin1</view>
      </view>
      <!-- <view class="line"></view> -->
      <view class="user-info-body">
        <view class="user-info-body-title">姓名</view>
        <view class="user-info-body-value">吕长春</view>
      </view>
      <!-- <view class="line"></view> -->
      <view class="user-info-body">
        <view class="user-info-body-title">性别</view>
        <view class="user-info-body-value">男</view>
      </view>
      <!-- <view class="line"></view> -->
      <view class="user-info-body">
        <view class="user-info-body-phone">手机号</view>
        <view class="user-info-body-phone-value">13541770202</view>
      </view>
       <!-- <view class="line"></view> -->
      <!-- 编辑信息页面 -->
      <view class="user-info-body3">
        <view class="update-pwd-btn"><view class="text" @click="updateSubmitPWD">修改密码</view></view>
        <view class="update-info-btn"><view class="text" @click="openEdit">编辑信息</view></view>
      </view>
    </view>
    
		<view class="form" v-else>
			<u--form labelPosition="left" ref="form">
				<u-form-item :labelWidth="60" label="账号:" prop="form.username" borderBottom>
					<u--input v-model="form.username" border="surround" clearable :maxlength="12"></u--input>
				</u-form-item>
				<u-form-item :labelWidth="60" label="姓名:" prop="form.name" borderBottom>
					<u--input v-model="form.name" border="surround" clearable></u--input>
				</u-form-item>

				<u-form-item :labelWidth="60" label="手机号:" prop="form.phone" borderBottom>
					<u--input v-model="form.phone" border="surround" clearable :maxlength="12"></u--input>
					<view style="color: red;" v-if="showPhoneError">
						{{phoneErrorMessage}}
					</view>
				</u-form-item>

				<u-form-item :labelWidth="60" label="性别:" prop="form.username" borderBottom>
					<u-radio-group v-model="form.sex" @change="changeSex">
						<u-radio activeColor="#2979FF" label="男" :name="1"></u-radio>
						<u-radio :customStyle="{marginLeft: '15px'}" activeColor="#2979FF" label="女" :name="2">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<view class="btn">
					<view class="resetBtn" @click="reset">
						取消
					</view>
					<view class="submitBtn" @click="submit">
						提交
					</view>
				</view>
			</u--form>

		</view>

		<!-- 写一个盒子，修改密码的盒子 -->
		<view class="update-password-box" style="margin-top: 600rpx;padding: 50rpx;" v-if="updatePWD">
			<view style="padding-right: 100rpx;">
				<!-- 修改的表单 -->
				请输入原密码：<view class="update-input-box">
					<u--input password :customStyle="{height: '30rpx'}" v-model="updateForm.oldPassword" />
				</view>
				请输入新密码：<view class="update-input-box">
					<u--input password :customStyle="{height: '30rpx'}" v-model="updateForm.newPassword" />
				</view>
				请再次输入新密码：<view class="update-input-box">
					<u--input password :customStyle="{height: '30rpx'}" v-model="updateForm.reNewPassword" />
				</view>
			</view>
			<view class="submit-box">
				<view class="submit-box-item" @click.native="submitPWD">提交</view>
				<view class="submit-box-item" @click.native="resetSubmitPWD">重置</view>
			</view>

		</view>
	
  </view>
</template>

<script>
	import lmd5 from '../../md5.js'
	export default {
		data() {
			return {
				updateForm: {
					oldPassword: '',
					newPassword: '',
					reNewPassword: ''
				},
				
				//控制修改密码的盒子是否展示
				updatePWD: false,
				//控制查看还是编辑盒子的展示
				show: false,
				adminInfo: '',
				form: {
					id: 0,
					username: '',
					name: '',
					phone: '',
					sex: 1,
				},
				showPhoneError: false,
				phoneErrorMessage: '',
			};
		},
		onLoad() {
			this.adminInfo = uni.getStorageSync("admin")
		},
		methods: {
			updateSubmitPWD(){
				
				this.updatePWD = true
			},
			
			// 重置修改密码的表单
			resetSubmitPWD() {
				this.updateForm = {}
			},
			// 提交修改密码的表单
			submitPWD() {
				
				if (this.updateForm.newPassword.length < 6) {
					uni.showToast({
						title: "密码长度不能小于6",
						icon: "error",
						duration: 2000
					})

					return
				}
                console.log(this.updateForm)
				if (this.updateForm.newPassword !== this.updateForm.reNewPassword) {
					 console.log()
					uni.showToast({
						title: "两次密码输入不一致",
						icon: "error",
						duration: 2000
					})

					return
				}
				
				//创建临时表单
				let tempForm = null
					tempForm = JSON.parse(JSON.stringify(this.updateForm))
			
				// 提交表单
				 tempForm.oldPassword = lmd5.hex_md5(tempForm.oldPassword)
				tempForm.newPassword = lmd5.hex_md5(tempForm.newPassword)
				tempForm.reNewPassword = lmd5.hex_md5(tempForm.reNewPassword)
			console.log(tempForm)
				uni.request({
					url: `${this.$baseUrl}/admin/updatePwd/${this.adminInfo.id}`,
					method: 'POST',
					data: tempForm
				}).then(res => {
					// console.log(res[1].data)
					if (res[1].data.status) {
						uni.showToast({
							title: res[1].data.msg,
							icon: "success",
							duration: 2000
						})
						this.updateForm = {}
						this.updatePWD = false
						uni.removeStorageSync("admin")
						uni.navigateTo({
							url:"/package_admin/adminLogin/adminLogin"
						})
					} else {
						uni.showToast({
							title: res[1].data.msg,
							icon: "error",
							duration: 2000
						})
					}


				}).catch(red => {
					console.log(res[1].data)
				})
			},
			
			
			//选择改变
			changeSex(res) {
				this.form.sex = res
			},
			//打开编辑窗口
			openEdit() {
				this.form = this.adminInfo
				this.show = true
			},

			//取消修改
			reset() {
				this.adminInfo = uni.getStorageSync("admin")
				this.show = false
			},
			//提交修改信息
			submit() {
				//校验电话号码是否合法
				if (this.form.phone === '') {
					this.phoneErrorMessage = '请输入手机号'
					this.showPhoneError = true
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.showPhoneError = true
						this.phoneErrorMessage = '手机号格式错误'
					} else {
						this.showPhoneError = false
					}
				}
				if (!this.showPhoneError) {

					this.$request({
						url: `${this.$baseUrl}/admin`,
						method: 'PUT',
						data: this.form
					}).then(res => {
						if (res.data.status) {
							uni.showToast({
								title: res.data.msg,
								icon: 'success',
								duration: 1000
							})
							this.show = false
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error',
								duration: 1000
							})
						}
					}).catch(res => {
						console.log(res)
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>  
  .box{
    .user-show-info{
      .user-info-body3{
        display: flex;
        .update-pwd-btn{
          margin-top: 32rpx;
          margin-left: 32rpx;
          // text-align: center;
          width: 304rpx;
          height: 64rpx;
          // line-height: 64rpx;
          opacity: 1;
          border-radius: 8rpx;
          background: rgba(237, 242, 254, 1);
          .text{
            margin-left: 96rpx;
            margin-top: 12rpx;
            width: 112rpx;
            height: 40rpx;
            opacity: 1;
            /** 文本1 */
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 40rpx;
            color: rgba(52, 125, 250, 1);
            text-align: left;
            vertical-align: top;
          }
        }
        .update-info-btn{
          margin-top: 32rpx;
          margin-left: 14rpx;
          // text-align: center;
          width: 304rpx;
          height: 64rpx;
          // line-height: 64rpx;
          opacity: 1;
          border-radius: 8rpx;
          background: rgba(237, 242, 254, 1);
          .text{
            margin-left: 96rpx;
            margin-top: 12rpx;
            width: 112rpx;
            height: 40rpx;
            opacity: 1;
            /** 文本1 */
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 40rpx;
            color: rgba(52, 125, 250, 1);
            text-align: left;
            vertical-align: top;
          }
        }
        
      }
      .user-info-body1{
        .user-info-header{
          width: 614rpx;
          margin-top: 32rpx;
          margin-left: 32rpx;
          .text{
            
          }
          border-bottom: 3rpx solid rgba(234, 234, 234, 1.0);
          margin-top: 32rpx;
          margin-left: 32rpx;
          margin-bottom: 0rpx;
          // width: 120rpx;
          height: 34rpx;
          opacity: 1;
          /** 文本1 */
          font-size: 24rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          line-height: 0rpx;
          color: rgba(153, 153, 153, 1);
          text-align: left;
          vertical-align: top;
        }
      }
      .user-info-body{
        border-bottom: 3rpx solid rgba(234, 234, 234, 1.0);
        height: 88rpx;
        width: 622rpx;
        margin-left: 32rpx;
      .user-info-body-phone{
          margin-top: 24rpx;
          margin-left: 32rpx;
          width: 84rpx;
          height: 40rpx;
          opacity: 1;
          /** 文本1 */
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: left;
          vertical-align: top;
        }
        .user-info-body-phone-value{
          margin-left: 116rpx;
          margin-top: 24rpx;
          width: 186rpx;
          height: 40rpx;
          opacity: 1;
          /** 文本1 */
          font-size: 28rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        .user-info-body-title{
          margin-left: 32rpx;
          margin-top: 24rpx;
          width: 56rpx;
          height: 40rpx;
          opacity: 1;
          /** 文本1 */
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 40rpx;
          color: rgba(51, 51, 51, 1);
          text-align: left;
          vertical-align: top;
        }
        .user-info-body-value{
          margin-top: 24rpx;
          margin-left: 144rpx;
          border-bottom: 2rpx solid rgba(245, 245, 245, 1);
        }
        display: flex;
      }
      .line1{
        // margin-top: 12rpx;
        margin-left: 24rpx;
        width: 622rpx;
        height: 0rpx;
        opacity: 1;
        background: rgba(204, 204, 204, 1);
        border-bottom: 1rpx solid rgba(245, 245, 245, 1);    
      }
      .line{
        // transform: translate(-50%);
        // position: absolute;
        margin-top: 24rpx;
        margin-left: 24rpx;
        width: 622rpx;
        height: 0rpx;
        opacity: 1;
        background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(245, 245, 245, 1);
    //  border-bottom: 1rpx solid rgba(255, 255, 255, 1);
      }
      
      position: absolute;
      margin-top: 32rpx;
      margin-left: 32rpx;
      width: 343px;
      height: 279px;
      opacity: 1;
      border-radius: 8px;
      background: rgba(255, 255, 255, 1);
      // padding: 40rpx;
    }    
    width: 375px;
    height: 1624rpx;
    opacity: 1;
    background: rgba(245, 245, 245, 1);
    margin-top: 0rpx;
    position: absolute;
  }
  
  //原始css
	.submit-box {
		display: flex;
		justify-content: center;

		.submit-box-item {
			background-color: #19be6b;
			margin: 20rpx 50rpx;
			height: 80rpx;
			width: 150rpx;
			border-radius: 20rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.update-input-box {
		border: 1px solid black;
		border-radius: 10rpx;
		margin: 10rpx auto;
	}

	.box {
		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 15rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #cacaca;

			.tag {
				color: #55aaff;
			}
		}

		.operation {
			margin-top: 30rpx;
			width: 80%;
			margin-left: 10%;
			display: flex;
			justify-content: space-evenly;

			.updataPassword {
				background-color: #55aaff;
				border-radius: 10rpx;
				padding: 8rpx;
			}

			.editInfo {
				background-color: #55aaff;
				border-radius: 10rpx;
				padding: 8rpx;
			}
		}

		.form {
			margin: 10rpx;
			padding: 20rpx;
			border: 1px solid #D6D6D6;

			.btn {
				margin-top: 20rpx;
				width: 60%;
				display: flex;
				justify-content: space-evenly;
				margin-left: 20%;

				.resetBtn {
					background-color: #aaffff;
					border-radius: 20rpx;
					padding: 8rpx 15rpx;
					text-align: center;
					border: 1rpx solid #D5D5D5;
				}

				.submitBtn {
					background-color: #ffaa00;
					border: 1rpx solid #D5D5D5;
					border-radius: 20rpx;
					padding: 8rpx 15rpx;
					text-align: center;

				}
			}
		}
	}
</style>
